<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>监控中心-月报表</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<link rel="stylesheet" type="text/css" href="/css/footer.css" />
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/preview/WdatePicker.js"></script>
<script type="text/javascript" src="/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="/js/highcharts/exporting.js"></script>
<script type="text/javascript" src="/js/highcharts/draggable-legend.js"></script>
<script type="text/javascript" src="/js/highcharts/highcharts-3d.js"></script>
<script type="text/javascript" src="/js/highcharts/data.js"></script>
<script type="text/javascript" src="/js/layer/layer.js"></script>
<script type="text/javascript" src="/js/dataBase.js"></script>
<script src="/js/js.cookie.js"></script>
<script src="/js/csrf.token.js"></script>
<script src="/js/jquery.JPlaceholder.js"></script>

<script>

$(function(){
	getdata();
});

var tdate;
var ydate;
var now ; //当前日期 
var nowDayOfWeek; //今天本周的第几天 
var nowDay ; //当前日 
var nowMonth ; //当前月 
var nowYear ; //当前年 

function initdate(selectdate){
    if(selectdate!=null&&selectdate!=""){
        selectdate+="-01";
        selectdate=selectdate.replace(/-/gm,'/');
        now=new Date(Date.parse(selectdate));   
    }else{
        now=new Date(); 
    }
    tdate=formatDate(now);
    nowDayOfWeek = now.getDay(); //今天本周的第几天 
    nowDay = now.getDate(); //当前日 
    nowMonth = now.getMonth(); //当前月 
    nowYear = now.getYear(); //当前年 
    nowYear += (nowYear < 2000) ? 1900 : 0; // 
}

function formatDate(date) { 
    var myyear = date.getFullYear(); 
    var mymonth = date.getMonth()+1; 
    var myweekday = date.getDate(); 

    if(mymonth < 10){ 
    mymonth = "0" + mymonth; 
    } 
    if(myweekday < 10){ 
    myweekday = "0" + myweekday; 
    } 
    return (myyear+"-"+mymonth + "-" + myweekday); 
}

/***
    * 获得本月的时间
    */
function getCurrentMonth(selectdate) {
    initdate(selectdate);
    var monthdays=[];
    var monthStartDate = new Date(nowYear, nowMonth, 1); //本月第一天
    var nextmonthStartDate = new Date(nowYear, nowMonth + 1, 1); //下月第一天
    var days = (nextmonthStartDate - monthStartDate)/(1000 * 60 * 60 * 24); //本月天数
    var day=monthStartDate;
    for(var i=0;i<days;i++){    
        monthdays.push(formatDate(day));
        day= new Date(Date.parse(day) + (86400000));
    }
    return monthdays;
};

function getdata(){
	getdata_ywbjtj();
	getdata_hjzxsj();
	getdata_sxtdds();
	getdata_ywbjzb();
	initzdyysjmonth();
}



//业务报警统计

function getdata_ywbjtj(){
	initdate($("#selectdate").val());
	$.ajax( {  
		url:"/sa_data/alarmall_view",// 跳转到 action  
		type:'POST',  
		cache:false,  
		dataType:'json',  
		success:function(data) { 
			var data_dx=data.ywbj;
			var data_rq=new Array();

			var data_sj=new Array();

			for(var i=0;i<data_dx.length;i++){
				var data_one=new Array();
				var data_one_date=data_dx[i].date;
				data_one.push(data_one_date.substr(data_one_date.length-5));
				data_rq.push(data_one);


				var data_one_sj={};
				data_one_sj['y']=data_dx[i].num;
				data_sj.push(data_one_sj);
			}

			
			var chart = new Highcharts.Chart({
				chart: {
					renderTo: 'ywbj',
					type: 'column',
					margin: 66,
					options3d: {
						enabled: true,
						alpha: 6,
						beta: 6,
						depth: 100,
						viewDistance: 200
					}
				},
				title: {
					text: '<a style="color:#4b8cdd;font-weight:bold;">业 务 报 警 系 统</a>'
				},
				credits: {
					text: '',
					href: '/'
				},
				plotOptions: {
					column: {
						depth: 25
					}
				},
				xAxis: {
					categories: data_rq,

					labels: {
						zIndex: 6
					}
				},
				yAxis: {
					title: {
						text: '业 务 报 警 总 计 ( 条 )'
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#808080'
					}],
					labels: {
						zIndex: 6
					}
				},
				tooltip: {
					formatter: function() {
						return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': <b>'+ this.y +'</b>';
					}
				},
				series: [{
					name: '每日报警总计',
					data: data_sj
				}]
			});

			$('#R0').on('change', function(){
				chart.options.chart.options3d.alpha = this.value;
				showValues();
				chart.redraw(false);
			});
			$('#R1').on('change', function(){
				chart.options.chart.options3d.beta = this.value;
				showValues();
				chart.redraw(false);
			});

			function showValues() {
				$('#R0-value').html(chart.options.chart.options3d.alpha);
				$('#R1-value').html(chart.options.chart.options3d.beta);
			}
			showValues();


			
		},  
		error:function(){     
		   alert("业务报警统计异常！");  
		}  
	 });
    
}


//业务报警占比
function getdata_ywbjzb(){
    initdate($("#selectdate").val());
    $.ajax( {  
        url:"/sa_data/alarmzb_view",// 跳转到 action  
        type:'POST',  
        cache:false,  
        dataType:'json',  
        success:function(data) { 
            $("#title_bjzb").html('<a style="color:#4b8cdd;font-weight:bold;">业务报警占比</a>'); 
            var tbody_data_ywbjzb=$("#data_bjzb");    
            tbody_data_ywbjzb.empty();

            var data_ywbjzb=data.bjzb;

            for(var i=0;i<data_ywbjzb.length;i++){
                var tr=$("<tr></tr>");
                var td_ti=$("<td></td>").html(data_ywbjzb[i].title);
                tr.append(td_ti);
                var td_num=$("<td></td>").html(data_ywbjzb[i].num);
                tr.append(td_num);
                var td_pr=$("<td></td>").html(data_ywbjzb[i].precent);
                tr.append(td_pr);
                var td_pm=$("<td></td>").html(i+1);
                tr.append(td_pm);
                tbody_data_ywbjzb.append(tr);
            }
		},
		error:function(){     
           alert("业务报警占比异常！");  
        }
	});
}



//呼叫中心话务量
function getdata_hjzxsj(){
	initdate($("#selectdate").val());
	$.ajax( {  
		url:"/sa_data/justcenter_view",// 跳转到 action  
		type:'POST',  
		cache:false,  
		dataType:'json',  
		success:function(data) { 
			var data_dx=data.hjzx;

			var data_rq=new Array();
			var data_sj=new Array();



			var data_mrhwl={};
			data_mrhwl['name']='每日话务量';
			var data_mrhwl_data=new Array();

			var data_szkfhss={};
			data_szkfhss['name']='深圳客服(8801)呼损数';
			var data_szkfhss_data=new Array();
			
			

			for(var i=0;i<data_dx.length;i++){
				var data_one=new Array();
				var data_one_date=data_dx[i].date;
				data_one.push(data_one_date.substr(data_one_date.length-5));
				data_rq.push(data_one);
				
				
				
				var data_one_mrhwl={};
				data_one_mrhwl['y']=data_dx[i].call_num;
				data_mrhwl_data.push(data_one_mrhwl);

				var data_one_szkfhss={};
				data_one_szkfhss['y']=data_dx[i].call_loss;
				data_szkfhss_data.push(data_one_szkfhss);
				
			}

			data_mrhwl['data']=data_mrhwl_data;
			data_szkfhss['data']=data_szkfhss_data;

			data_sj.push(data_mrhwl);
			data_sj.push(data_szkfhss);



			var chart = new Highcharts.Chart({
				chart: {
					renderTo: 'hjzx',
					type: 'spline'
				},
				title: {
					text: '<a style="color:#4b8cdd;font-weight:bold;">呼 叫 中 心 系 统</a>'
				},
				credits: {
					text: '',
					href: '/'
				},
				xAxis: {
					categories: data_rq,
					labels: {
						zIndex: 6
					}
				},
				yAxis: {
					title: {
						text: '话 务 量 统 计 (Erlang)'
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#808080'
					}],
					labels: {
						zIndex: 6
					}
				},
				tooltip: {
					formatter: function() {
						return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': <b>'+ this.y +'</b>';
					}
				},
				legend: {
					layout: 'vertical',
					backgroundColor: 'white',
					align: 'left',
					verticalAlign: 'top',
					y: 0,
					x: 64,
					borderWidth: 1,
					borderRadius: 0,
					title: {
						text: '点击筛选数据'
					},
					floating: true,
					draggable: true,
					zIndex: 20
				},
				series:data_sj
			});
			
			
		},  
		error:function(){     
		   alert("呼叫中心话务量统计异常！");  
		}  
	 });
    
}


//三系统订单数 
function getdata_sxtdds(){
    initdate($("#selectdate").val());
    $.ajax( {  
        url:"/sa_data/ordertop_view",// 跳转到 action  
        type:'POST',  
        cache:false,  
        dataType:'json',  
        success:function(data) { 
            $("#sxtdds").html('<a style="color:#4b8cdd;font-weight:bold;">业务报警占比</a>'); 
            var tbody_data_sxtdds=$("#data_sxtdds");    
            tbody_data_sxtdds.empty();

            var data_sxtdds=data.jdph;

            for(var i=0;i<data_sxtdds.length;i++){
                var tr=$("<tr></tr>");
                var td_sys=$("<td></td>").html(data_sxtdds[i].sys);
                tr.append(td_sys);
                var td_top=$("<td></td>").html(data_sxtdds[i].top);
                tr.append(td_top);
                var td_pr=$("<td></td>").html(data_sxtdds[i].precent);
                tr.append(td_pr);
                tbody_data_sxtdds.append(tr);
            }
		},
		error:function(){     
           alert("三系统订单数统计异常！");  
        }
	});
}

//重点运营事件
function initzdyysjmonth(){
	var lastmonthStartDate = formatDate(new Date(nowYear, nowMonth - 1, 1));
	$.ajax( {  
		url:"/sa_data/satext_view",// 跳转到 action  
		data:{  
			tdate:lastmonthStartDate,
			cycle:"monthly"
		},  
		type:'POST',  
		cache:false,  
		dataType:'json',  
		success:function(data) { 
			
			var fxjy=data.fxjy;
			var data_fxjy=$("#zdyysj-content");
			data_fxjy.empty();
			if (fxjy==''||fxjy==null){
				$("#zdyysj-content").html(""+lastmonthStartDate.substr(0, 7)+"-月报表内容未填写");
			}else{
				for(var i=0;i<fxjy.length;i++){
					data_fxjy.append(fxjy[i]);
					if(i<fxjy.length-1){
						data_fxjy.append("<br />");
					}
				}
			}
		},  
		error:function(){     
		   alert("异常！");  
		}  
	 });
}
  

</script>

<style>
th {
	font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	padding: 6px 6px 6px 12px;
}

.table td {
	border-right: 1.5px solid #C1DAD7;
	border-bottom: 1.5px solid #C1DAD7;
	background: #fff;
	font-size: 12px;
	padding: 6px 6px 6px 12px;
	color: #4f6b72;
}

</style>

</head>
<body bgcolor="#FFFFFF">

	<h2 align="center"><font size="6">监控中心运营统计月报表</font> {% if perms.Matrix.add_report %}&nbsp;<a style="font-size:22px;color:red;" href="/preview/sainsert.html">编辑器</a>{% endif %}</h2>	
	<p style="margin:0;font-size:22px;background:#00FFFF">业务报警系统统计图</p>
	<table style="width:100%;background-color:#337FE5;" cellpadding="0" cellspacing="0" align="center" border="1" bordercolor="#111111">
		<tbody>
			<tr>
				<td>
					<div id="ywbj" class="gxtjt" style="min-width:700px;height:500px">业务报警系统柱状图</div>
				</td>
			</tr>
		<tbody>
	</table>
	<br>
	<br>
	<p style="margin:0;font-size:22px;background:#00FFFF">业务报警规则占比统计图</p>
	<table style="width:100%;background-color:#337FE5;" cellpadding="0" cellspacing="0" align="center" border="1" bordercolor="#111111">
		<tbody>
			<tr>
				<td>
					<table class="table table-hover"  style="width:100%;" border='1' cellspacing="0" cellpadding="0" align="center" bordercolor="#fffff8">
						<thead>
							<tr style="background-color:#fff">
								<th>规则标题</th>
								<th>报警数目</th>
								<th>报警占比</th>
								<th>排名</th>
							</tr>
						</thead>
						<tbody id="data_bjzb" align="center"></tbody>
					</table>
				</td>
			</tr>
		<tbody>
	</table>
	<br>
	<br>
	<p style="margin:0;font-size:22px;background:#00FFFF">呼叫中心话务统计图</p>
	<table style="width:100%;background-color:#337FE5;" cellpadding="0" cellspacing="0" align="center" border="1" bordercolor="#111111">
		<tbody>
			<tr>
				<td>
					<div id="hjzx" class="gxtjt" style="min-width:700px;height:500px">呼叫中心话务概况</div>
				</td>
			</tr>
		<tbody>
	</table>
	<br>
	<br>
	<p style="margin:0;font-size:22px;background:#00FFFF">三系统订单数统计图</p>
	<table style="width:100%;background-color:#337FE5;" cellpadding="0" cellspacing="0" align="center" border="1" bordercolor="#111111">
		<tbody>
			<tr>
				<td>
					<table class="table table-hover"  style="width:100%;" border='1' cellspacing="0" cellpadding="0" align="center" bordercolor="#fffff8">
						<thead>
							<tr style="background-color:#fff">
								<th>系统编号</th>
								<th>订单总数</th>
								<th>订单数占比</th>
							</tr>
						</thead>
						<tbody id="data_sxtdds" align="center"></tbody>
					</table>
				</td>
			</tr>
		<tbody>
	</table>
	<br>
	<br>
	<p style="margin:0;font-size:22px;background:#00FFFF">重点运营事件</p>
	<span id="zdyysj-content" align="center"></span>
</body>
</html>
